import React, { Component } from 'react';
import styles from './chart.less';
import { Radio } from 'antd';
import Bar3D from '../../components/Echarts/Bar3D';
import LiquidFill from '../../components/Echarts/LiquidFill';
import GlobelLayers from '../../components/Echarts/GlobeLayers';
import WordCloud from '../../components/Echarts/WordCloud';
import Dashboard from '../../components/Echarts/Dashboard';

const RadioGroup = Radio.Group;
export default class Echarts extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 1,
    };
  }
  onChange = e => {
    this.setState({
      value: e.target.value,
    });
  };
  showEchart = value => {
    switch (value) {
      case 1:
        return <Bar3D />;
      case 2:
        return <LiquidFill />;
      case 3:
        return <GlobelLayers />;
      case 4:
        return <WordCloud />;
      case 5:
        return <Dashboard />;
      default:
        return null;
    }
  };
  render() {
    const { value } = this.state;
    return (
      <div>
        <div className="echarts">
          <div className={styles.radioGroup}>
            <RadioGroup onChange={this.onChange} value={value}>
              <Radio value={1}>Bar3D</Radio>
              <Radio value={2}>LiquidFill</Radio>
              <Radio value={3}>GlobelLayers</Radio>
              <Radio value={4}>WordCloud</Radio>
              <Radio value={5}>Dashboard</Radio>
            </RadioGroup>
          </div>
          <div className={styles.showEchart}>{this.showEchart(value)}</div>
        </div>
      </div>
    );
  }
}
